Vue.component('xcchart_control_digital', {
  template: '<section>\
              <el-row :gutter="20" justify="center">\
                <el-col :span="24/xcchart_layout_innerspan.pcvalue" v-for="(item, index) in sr.dimlables" :key="index">\
                  <div style="text-align: center;font-family: Arial, sans-serif;font-weight: bold;font-size: 19px;">{{sr.dimlables[index]}}</div>\
                  <div style="text-align: center;font-size: 30px">{{sr.facts[0][index]}}</div>\
                </el-col>\
              </el-row>\
            </section>',
  props: {
    value: {
      type: Object,
    },
    fieldfulljson: {
      type: Array,
    },
    xcform_id: {
      type: Number,
    }
  },
  data() {
    return {
      xcchart_base_xctitle: this.value['fieldjsonObj']['xcchart_base_xctitle'],
      xcchart_data_dim: this.value['fieldjsonObj']['xcchart_data_dim'],
      xcchart_data_facts: this.value['fieldjsonObj']['xcchart_data_facts'],
      xcchart_layout_innerspan: this.value['fieldjsonObj']['xcchart_layout_innerspan'],
      sr: {
        dimlables: [],
        facts: [],
      },
      control: {}
    };
  },
  created() {
    var that = this;
  },
  mounted() {
    var that = this;
    Fast.api.ajax({
      url: Fast.api.fixurl(Config.controlPath + "getXcchartOptions"),
      method: 'get',
      data: {
        xcform_id: that.xcform_id,
        __vModel__: that.value.__vModel__,
      }
    }, function (data, ret) {
      that.sr.dimlables = data.dimlables;
      that.sr.facts = data.facts;

      return false;
    });
  },
  methods: {}
});